<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/style.css" />
	<script type="text/javascript" src="../../Js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>
	<script type="text/javascript" src="../../myjQuery/jQuery-getUrlParam.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        .delete-btn{
        	color:blue;
        }
         .delete-btn:hover{
        	color:red;
        }
        .page-turning{
        margin: 10px auto;
        width: 200px;
        }
         .page-turning button{
            color: #ffffff;
    		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    		background-color: #006dcc;
        } 
        
        .editfontcolor{
        	color: blue;
        	cursor: pointer;
        }
        
        .upDateData{
        	color: red;
        	opacity: 0;
        }
    </style>
    <script>
    
    $(function(){
    	$.ajax({
    		type:"post",
    		url:"../../lattice/findcidall",
    		contentType:"application/json;charset=utf-8",
    		success:function(cabinet){
    			for(var i= 0;i<cabinet.length;i++){
    				$('#cid').append("<option value="+cabinet[i].cid+">"+cabinet[i].cid+"</option>");
    			}
    			
    		}
    	});
    });
    
    var str;//记录商品信息
    var eidtnum =0;//记录发生过编辑的数量
    var commoditiesstr;//记录商品名商品ID
    $(function(){
    	$.ajax({
    		type:"post",
    		url:"../../lattice/findall",
    		contentType:"application/json;charset=utf-8",
    		success:function(commodities){
    			commoditiesstr = commodities;
    		}
    	});
    	
    	$.ajax({
    		type:"post",
    		url:"../../lattice/findfirst?cid=101",
    		contentType:"application/json;charset=utf-8",
    		success:function(commoditiesViewVo){
    			str = commoditiesViewVo;
    			$('tbody').html("");
				for(var i=0;i<10;i++ ){//commoditiesViewVo.length
					var j =i+1;
					$('tbody')
			  		.append("<tr id="+i+">"+
			  				"<td>"+"<input type='checkbox' id='check' name='check"+i+"'>"+j+"</td>"+
			  				"<td>"+"<input type='text' value="+commoditiesViewVo[i].lid+" id='lid-"+i+"' readonly></td>"+
			  				"<td id='select"+i+"'>"+
			  				"<select onclick='selectclick("+i+")' disabled=disabled>"+
			  				"<option id='option"+i+"' value="+commoditiesViewVo[i].coid+">"+commoditiesViewVo[i].coid+"</option>"+
			  				"</select></td>"+
			  				"<td id='select2"+i+"'>"+
			  				"<select onclick='selectclicks("+i+")' disabled=disabled>"+
			  				"<option id='options"+i+"' value="+commoditiesViewVo[i].coname+">"+commoditiesViewVo[i].coname+"</option>"+
			  				"</select></td>"+
			  				"<td>"+"<input type='text' id='saleprice"+i+"' value="+commoditiesViewVo[i].saleprice+" readonly></td>"+
			  				"<td id='editspan"+i+"'>"+"<span class='editfontcolor' onclick='edit("+i+")' id='edit"+i+"'>编辑</span>"+"</td>"+ 
			  				"</tr>"		
			  		);
					//$('#pagenum').html("1 条记录 1/1页");
				}	
				$('.page-turning').append(
				"<tr><td><button id='lastpage' onclick='out(-1)' disabled='true'>上一页</button></td>"+
				"<td>&nbsp;&nbsp;第<span>&nbsp;1&nbsp;</span>页&nbsp;&nbsp;</td>"+
				"<td><button id='nextpage' onclick='out(1)'>下一页</button></td></tr>");
				$('#lastpage').css('color','rgba(0,0,0,0.5)');
    		}
    	});
    	//end1
    	
    });
    var s1=0;
    var page = 1;
    function out(point){
    	if(eidtnum > 0){
    		if(confirm("您有"+eidtnum+"个信息发生改变！确定不保存跳转到下一页？")){
    			eidtnum=0;
    			var s = point;
        		page = page + point;
        		s1=s1+s*10;
        		//alert(str.length);
        				$('tbody').html("");
        				for(var i=0+s1;i<10+s1;i++ ){
        					var j =i+1;
        					$('tbody')
        			  		.append("<tr id="+i+">"+
        			  				"<td>"+"<input type='checkbox' id='check' name='check"+i+"'>"+j+"</td>"+
        			  				"<td>"+"<input type='text' value="+str[i].lid+" readonly></td>"+
        			  				"<td id='select"+i+"'>"+
        			  				"<select onclick='selectclick("+i+")' disabled=disabled>"+
        			  				"<option id='option"+i+"' value="+str[i].coid+">"+str[i].coid+"</option>"+
        			  				"</select></td>"+
        			  				"<td id='select2"+i+"'>"+
        			  				"<select onclick='selectclicks("+i+")' disabled=disabled>"+
        			  				"<option id='options"+i+"' value="+str[i].coname+">"+str[i].coname+"</option>"+
        			  				"</select></td>"+
        			  				"<td>"+"<input type='text' value="+str[i].saleprice+" readonly></td>"+
        			  				"<td id='editspan"+i+"'>"+"<span class='editfontcolor' onclick='edit("+i+")' id='edit"+i+"'>编辑</span>"+"</td>"+ 
        			  				"</tr>"				
        			  		);
        				}
        				$('.page-turning').html('');
        				$('.page-turning').append(
        						"<tr><td><button id='lastpage' onclick='out(-1)'>上一页</button></td>"+
        						"<td>&nbsp;&nbsp;第<span>&nbsp;"+page+"&nbsp;</span>页&nbsp;&nbsp;</td>"+
        						"<td><button id='nextpage' onclick='out(1)'>下一页</button></td></tr>");
        				
        				if(s1 == 0){
        					$('#lastpage').attr('disabled',true).css('color','rgba(0,0,0,0.5)');
        				}else{
        					if(s1 == str.length-10 || s1 > str.length-10){
        						$('#nextpage').attr('disabled',true).css('color','rgba(0,0,0,0.5)');
        					}
        				}
    		}
    	}else{
    		var s = point;
    		page = page + point;
    		s1=s1+s*10;
    		//alert(str.length);
    				$('tbody').html("");
    				for(var i=0+s1;i<10+s1;i++ ){
    					var j =i+1;
    					$('tbody')
    			  		.append("<tr id="+i+">"+
    			  				"<td>"+"<input type='checkbox' id='check' name='check"+i+"'>"+j+"</td>"+
    			  				"<td>"+"<input type='text' value="+str[i].lid+" readonly></td>"+
    			  				"<td id='select"+i+"'>"+
    			  				"<select onclick='selectclick("+i+")' disabled=disabled>"+
    			  				"<option id='option"+i+"' value="+str[i].coid+">"+str[i].coid+"</option>"+
    			  				"</select></td>"+
    			  				"<td id='select2"+i+"'>"+
    			  				"<select onclick='selectclicks("+i+")' disabled=disabled>"+
    			  				"<option id='options"+i+"' value="+str[i].coname+">"+str[i].coname+"</option>"+
    			  				"</select></td>"+
    			  				"<td>"+"<input type='text' value="+str[i].saleprice+" readonly></td>"+
    			  				"<td id='editspan"+i+"'>"+"<span class='editfontcolor' onclick='edit("+i+")' id='edit"+i+"'>编辑</span>"+"</td>"+ 
    			  				"</tr>"				
    			  		);
    				}
    				$('.page-turning').html('');
    				$('.page-turning').append(
    						"<tr><td><button id='lastpage' onclick='out(-1)'>上一页</button></td>"+
    						"<td>&nbsp;&nbsp;第<span>&nbsp;"+page+"&nbsp;</span>页&nbsp;&nbsp;</td>"+
    						"<td><button id='nextpage' onclick='out(1)'>下一页</button></td></tr>");
    				
    				if(s1 == 0){
    					$('#lastpage').attr('disabled',true).css('color','rgba(0,0,0,0.5)');
    				}else{
    					if(s1 == str.length-10 || s1 > str.length-10){
    						$('#nextpage').attr('disabled',true).css('color','rgba(0,0,0,0.5)');
    					}
    				}
    	}
		}
    
    function edit(i){
    	 $('[name=check'+i+']:checkbox').prop('checked',true);
    	eidtnum =eidtnum+1;
    	//alert(eidtnum);
    	var j = i;
    	$('#editspan'+j).html('');
    	$('#editspan'+j).append("<span class='editfontcolor' onclick='cancle("+i+")' id='cancle"+i+"'>取消</span>").css('color','red');
    	var txtN = $('#'+i+' '+'input');
    	for(i=2;i<txtN.length;i++){ 
        	txtN[i].readOnly=false; 
        	}
    	var txtN1 = $('#'+j+' '+'select');
    	for(i=0;i<txtN1.length;i++){ 
        	txtN1[i].disabled=false; 
        	}
    	for(i=0; i < commoditiesstr.length;i++){
    		$('#select'+j+' '+'select').append("<option value='"+commoditiesstr[i].coid+"'>"+commoditiesstr[i].coid+"</option>");
        	$('#select2'+j+' '+'select').append("<option value='"+commoditiesstr[i].coname+"'>"+commoditiesstr[i].coname+"</option>");
    	}	
    }
    
    function cancle(i){
    	var j = i;
    	$('#editspan'+j).html('');
    	$('#editspan'+j).append("<span class='editfontcolor' onclick='edit("+i+")' id='edit"+i+"'>编辑</span>").css('color','blue');
    	var txtN = $('#'+i+' '+'input');
    	for(i=2;i<txtN.length;i++){ 
        	txtN[i].readOnly=true; 
        	}
    	var txtN1 = $('#'+j+' '+'select');
    	for(i=0;i<txtN1.length;i++){ 
        	txtN1[i].disabled=true; 
        	}
    }
    
    function selectclick(i){
    	 // setTimeout(function () {
    			var optionval = $('#select'+i+' '+'select').val();
    	    	//alert(optionval);
    			$.ajax({
    	    		type:"post",
    	    		url:"../../lattice/findconamebycoid?coid="+optionval,
    	    		contentType:"application/json;charset=utf-8",
    	    		success:function(commodities){
    	    			//alert(commodities.coname);
    	    			//$('#options'+i).val(commodities.coname).html(commodities.coname);
    	    			$('#options'+i).attr('value',commodities.coname).prop('text',commodities.coname);
    	    		}
    	    	});
    	    //}, 100);
    }
    function selectclicks(i){
  	//  setTimeout(function () {
  			var optionval = $('#select2'+i+' '+'select').val();
  	    	//alert(optionval);
  			$.ajax({
  	    		type:"post",
  	    		url:"../../lattice/findconamebyname?coname="+optionval,
  	    		contentType:"application/json;charset=utf-8",
  	    		success:function(commodities){
  	    			//alert(commodities.coname);
  	    			$('#option'+i).attr('value',commodities.coid).prop('text',commodities.coid);
  	    		}
  	    	});
  	   // }, 100);
  }
    $(function(){
    	$('#allcheck').click(function(){ 
    		if(this.checked){/*对默认是否为选中进行判断*/ 
    		 $('[id=check]:checkbox').prop('checked',true);/*checked为true时为默认显示的状态,为true实现全选功能*/ 
    		 }else{ 
    		// $('[id=check]:checkbox').attr('checked',false);/*false为反选即为全部选功能*/ 
    			 $('[id=check]:checkbox').prop('checked',this.checked);
    		 } 
    		}); 
    });
    
    $(function(){
    	$('#saveLatticeAll').click(function(){
    		var successUpdatanum=0;
    		var checkArray = $('[id=check]:checkbox');
    		var upadtenum = 0;//更新数量
    		//alert(check);
    		for(var i=0;i<checkArray.length;i++){
    			 if(checkArray[i].checked){
    				 upadtenum = upadtenum+1;
    				var LatticeUpdateString = $('#cid').val()
    										+"-"+$('#lid-'+i).val()
						    				+"-"+$('#select'+i+' '+'select').val()
						    				+"-"+$('#select2'+i+' '+'select').val()
						    				+"-"+$('#saleprice'+i).val();
    				//alert(LatticeUpdateString);
    				$.ajax({
    					type:"post",
    					url:"../../lattice/updatelattice?updateLatticeString="+LatticeUpdateString,
    					contentType:"application/json;charset=utf-8",
    					success:function(latticePoint){
    						
    						successUpdatanum = successUpdatanum+latticePoint;
    						//alert(successUpdatanum);
    						//checkArray[i].checked = false;
    					}
    				});
    			} 
    		}
    		if(upadtenum == 0){
				alert('选择要更新保存的数量为空');	
			}else{
				$('#saveLatticeAll').attr('disabled',true);
				$('.upDateData').css('opacity','1');
				setTimeout(function(){
					$('.upDateData').css('opacity','0');
					$('#saveLatticeAll').attr('disabled',false);
					alert('成功更新了'+successUpdatanum+"条信息");
				}, 3000)
			}
    	});
    });
    
    $(function(){
    	$('#cid').click(function(){
    		var cid = $(this).val();
    		$.ajax({
        		type:"post",
        		url:"../../lattice/findfirst?cid="+cid,
        		contentType:"application/json;charset=utf-8",
        		success:function(commoditiesViewVo){
        			str = commoditiesViewVo;
        			$('tbody').html("");
    				for(var i=0;i<10;i++ ){//commoditiesViewVo.length
    					var j =i+1;
    					$('tbody')
    			  		.append("<tr id="+i+">"+
    			  				"<td>"+"<input type='checkbox' id='check' name='check"+i+"'>"+j+"</td>"+
    			  				"<td>"+"<input type='text' value="+commoditiesViewVo[i].lid+" id='lid-"+i+"' readonly></td>"+
    			  				"<td id='select"+i+"'>"+
    			  				"<select onclick='selectclick("+i+")' disabled=disabled>"+
    			  				"<option id='option"+i+"' value="+commoditiesViewVo[i].coid+">"+commoditiesViewVo[i].coid+"</option>"+
    			  				"</select></td>"+
    			  				"<td id='select2"+i+"'>"+
    			  				"<select onclick='selectclicks("+i+")' disabled=disabled>"+
    			  				"<option id='options"+i+"' value="+commoditiesViewVo[i].coname+">"+commoditiesViewVo[i].coname+"</option>"+
    			  				"</select></td>"+
    			  				"<td>"+"<input type='text' id='saleprice"+i+"' value="+commoditiesViewVo[i].saleprice+" readonly></td>"+
    			  				"<td id='editspan"+i+"'>"+"<span class='editfontcolor' onclick='edit("+i+")' id='edit"+i+"'>编辑</span>"+"</td>"+ 
    			  				"</tr>"		
    			  		);
    					//$('#pagenum').html("1 条记录 1/1页");
    				}	
    				$('.page-turning').html('');
    				$('.page-turning').append(
    				"<tr><td><button id='lastpage' onclick='out(-1)' disabled='true'>上一页</button></td>"+
    				"<td>&nbsp;&nbsp;第<span>&nbsp;1&nbsp;</span>页&nbsp;&nbsp;</td>"+
    				"<td><button id='nextpage' onclick='out(1)'>下一页</button></td></tr>");
    				$('#lastpage').css('color','rgba(0,0,0,0.5)');
        		}
        	});
    	});
    });
	</script>
</head>
<body>
<form class="form-inline definewidth m20" action="index.html" method="get">  
        选择柜子编号：
        <select id="cid" style="width:100px;"></select> &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-primary" id="saveLatticeAll">保存</button>&nbsp;&nbsp; <span class="upDateData">数据处理更新中...请稍后</span>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th><input type="checkbox" id="allcheck">ID</th>
        <th>格子编号</th>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>编辑</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div class="page-turning"></div>
</body>
</html>